<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>九宫格</title>
    <style>
        *{margin: 0;padding:0}
        #ul1 li{
            list-style:none;
            width: 100px;
            height: 100px;
            border: 1px solid black;
            margin: 10px;
            float:left;
            background-color: #BCD0C3;
        }
        #ul1{
            width: 366px;
            height: 366px;
            border: 1px solid black;
            margin: 100px auto;
        }
        #ul1 li img{
            width: 100px;
            height: 100px;
        }
    </style>
    <script>
        window.onload = function () {
            var oUl1 = document.getElementById("ul1");
            var aLis = oUl1.getElementsByTagName("li");

            for (var i = 0; i < aLis.length; i++){
                aLis[i].style.left = aLis[i].offsetLeft + "px";
                aLis[i].style.top = aLis[i].offsetTop + "px";
                var oImg = document.createElement("img");
                oImg.src = "img/" + (i + 1) + ".jpg";
                aLis[i].appendChild(oImg);
            }

            for (var i =0; i < aLis.length;i++){
                aLis[i].style.position = "absolute";
                aLis[i].style.margin = "0px";
            }
        }
    </script>
</head>
<body>
    <ul id="ul1">
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
</html>